<template>
  <div class="stock-filter-bar">
    <div class="filter-section config-section">
      <!-- 票据类型筛选组件 -->
      <TicketTypeFilter
        ref="ticketTypeFilterRef"
        v-model="ticketTypeTags"
        @change="handleTypeChange"
        @type-select="handleTypeSelect"
      />
    </div>

    <div class="filter-section config-section">
      <!-- 金额范围配置组件 -->
      <AmountRangeConfig
        ref="amountRangeConfigRef"
        v-model="amountTags"
        :selected-type-id="selectedTypeId"
        @change="handleAmountChange"
        @range-select="handleRangeSelect"
      />
    </div>

    <div class="filter-section config-section">
      <!-- 到期日期设置组件 -->
      <ExpiryDateConfig
        ref="expiryDateConfigRef"
        v-model="dueDateTags"
        :selected-range-id="selectedRangeId"
        @change="handleDateChange"
        @date-select="handleDateSelect"
      />
    </div>

    <div class="filter-section rate-config-section">
      <!-- 利率配置组件 -->
      <InterestRateConfig
        ref="interestRateConfigRef"
        :selected-range-id="selectedRangeId"
        :selected-date-range-id="selectedDateRangeId"
        @rate-change="handleRateChange"
        @rate-submit="handleRateSubmit"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import TicketTypeFilter from "./FilterConfiguration/TicketTypeFilter.vue"
import AmountRangeConfig from "./FilterConfiguration/AmountRangeConfig.vue"
import ExpiryDateConfig from "./FilterConfiguration/ExpiryDateConfig.vue"
import InterestRateConfig from "./FilterConfiguration/InterestRateConfig.vue"
import type { TagItem } from "./FilterConfiguration/types"

// 组件引用
const ticketTypeFilterRef = ref<InstanceType<typeof TicketTypeFilter> | null>(null)
const amountRangeConfigRef = ref<InstanceType<typeof AmountRangeConfig> | null>(null)
const expiryDateConfigRef = ref<InstanceType<typeof ExpiryDateConfig> | null>(null)
const interestRateConfigRef = ref<InstanceType<typeof InterestRateConfig> | null>(null)

// 数据状态
const ticketTypeTags = ref<TagItem[]>([])
const amountTags = ref<TagItem[]>([])
const dueDateTags = ref<TagItem[]>([])

// 计算属性：获取当前选中的ID
const selectedTypeId = computed(() => {
  const selectedType = ticketTypeTags.value.find((t) => t.type === "primary")
  return selectedType ? Number(selectedType.value) : undefined
})

const selectedRangeId = computed(() => {
  const selectedRange = amountTags.value.find((t) => t.type === "primary")
  return selectedRange ? Number(selectedRange.value) : undefined
})

const selectedDateRangeId = computed(() => {
  const selectedDate = dueDateTags.value.find((t) => t.type === "primary")
  return selectedDate ? Number(selectedDate.value) : undefined
})

// 事件处理函数
const handleTypeChange = (selectedTypes: TagItem[]) => {
  console.log("票据类型变化:", selectedTypes)
  // 重置利率配置
  interestRateConfigRef.value?.initializeRateConfig()
}

const handleTypeSelect = (tag: TagItem) => {
  console.log("选中票据类型:", tag)
  // 重置利率配置
  interestRateConfigRef.value?.initializeRateConfig()
}

const handleAmountChange = (selectedRanges: TagItem[]) => {
  console.log("金额范围变化:", selectedRanges)
  // 重置利率配置
  interestRateConfigRef.value?.initializeRateConfig()
}

const handleRangeSelect = (tag: TagItem) => {
  console.log("选中金额范围:", tag)
  // 重置利率配置
  interestRateConfigRef.value?.initializeRateConfig()
}

const handleDateChange = (selectedDates: TagItem[]) => {
  console.log("到期日期变化:", selectedDates)
}

const handleDateSelect = (tag: TagItem) => {
  console.log("选中到期日期:", tag)
}

const handleRateChange = (ratePercent: number | undefined, fixedAmount: number | undefined) => {
  console.log("利率变化:", { ratePercent, fixedAmount })
}

const handleRateSubmit = (ratePercent: number | undefined, fixedAmount: number | undefined) => {
  console.log("利率提交:", { ratePercent, fixedAmount })
}

// 暴露方法给父组件
defineExpose({
  // 获取选中的数据
  getSelectedType: () => ticketTypeTags.value.find((t) => t.type === "primary"),
  getSelectedRange: () => amountTags.value.find((t) => t.type === "primary"),
  getSelectedDate: () => dueDateTags.value.find((t) => t.type === "primary"),

  // 获取组件引用
  getTicketTypeFilter: () => ticketTypeFilterRef.value,
  getAmountRangeConfig: () => amountRangeConfigRef.value,
  getExpiryDateConfig: () => expiryDateConfigRef.value,
  getInterestRateConfig: () => interestRateConfigRef.value,

  // 重置所有配置
  resetAll: () => {
    ticketTypeTags.value = []
    amountTags.value = []
    dueDateTags.value = []
    interestRateConfigRef.value?.initializeRateConfig()
  }
})
</script>

<style scoped lang="scss">
.stock-filter-bar {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;

  .filter-section {
    padding-bottom: 16px;
    border-bottom: 1px dashed #ebeef5;

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .config-section {
    background-color: #f9fafc;
    padding: 16px;
    border-radius: 6px;
    margin-top: 4px;
  }

  .rate-config-section {
    background-color: #f9fafc;
    padding: 16px;
    border-radius: 6px;
    margin-top: 4px;
  }

  :deep(.el-tag) {
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 4px;

    &.el-tag--primary {
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
      font-weight: 500;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
  }

  :deep(.el-input-number) {
    width: 180px;

    .el-input__wrapper {
      box-shadow: 0 0 0 1px #dcdfe6 inset;

      &:hover {
        box-shadow: 0 0 0 1px #c0c4cc inset;
      }

      &.is-focus {
        box-shadow: 0 0 0 1px #409eff inset;
      }
    }
  }

  :deep(.el-button) {
    transition: all 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &.el-button--primary {
      background-color: #409eff;

      &:hover {
        background-color: #66b1ff;
      }
    }
  }

  :deep(.section-title) {
    font-size: 14px;
    font-weight: 600;
    color: #606266;
    margin-bottom: 12px;
    display: flex;
    align-items: center;

    &::before {
      content: "";
      display: inline-block;
      width: 4px;
      height: 14px;
      background-color: #409eff;
      margin-right: 8px;
      border-radius: 2px;
    }
  }
}
</style>
